<template>
  <div class="app">
		<img v-if="isShowDownloadApp" @click="isShowDownloadApp = false" class="downloadAppImgUrl"
      src="https://yanxuan.nosdn.127.net/static-union/16607924415e76bf.png?type=webp&imageView&thumbnail=750x0&quality=75"
      alt="">
		<!-- navbar -->
		<van-nav-bar
			:title="route.meta.title"
			left-text="返回"
			left-arrow
			@click-left="handleBack"
			:style="{
				position: 'fixed',
				zIndex: 99999,
				top: '0px',
				left: 0,
				width: '100%'
			}"
		/>
		<!-- 路由视图 -->
		<div class="main" :style="{
			// height: isShowDownloadApp?'calc(100% - 98px)':'calc(100% - 46px)'
		}">
			<router-view></router-view>
		</div>
		<!-- tabbar -->
    <van-tabbar v-if="route.meta.isShow" v-model="activeTabbar" >
      <van-tabbar-item to="/home" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/category" icon="orders-o">分类</van-tabbar-item>
      <van-tabbar-item to="/deserve" icon="photo-o" dot>值得买</van-tabbar-item>
      <van-tabbar-item to="/cart" icon="shopping-cart-o" badge="5">购物车</van-tabbar-item>
      <van-tabbar-item to="/ucenter" icon="user-o" dot>个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import { useRoute, useRouter } from 'vue-router';

	// 显示 or 隐藏 下载app 导流
	const isShowDownloadApp = ref(false)

	// 选择 tabbar
  const activeTabbar = ref(0)

	const route = useRoute()
	const router = useRouter()

	const handleBack = () => {
		router.back()
	}

</script>

<style scoped lang="less">
* {
	margin: 0;
	padding: 0;
}
.app {
	box-sizing: border-box;
  height: 100vh;
	padding-bottom: 50px;
	padding-top: 52px;
  background-color: rgb(247, 248, 249);
  .downloadAppImgUrl {
    width: 100%;
		display: block;
  }
	.main {
		height: calc(100%);
	}
}
</style>
